﻿<div class="container">
    <div class="row">
        <div class="col-md-2">
            Skill type:
            <select ng-model="skillType" ng-options="s.name for s in skillTypes" ng-change="skillTypeChange()"></select>
        </div>
        <div class="col-md-10">
            <div ng-if="!skills.length">
                There are no skills associated with {{skillType.name}}
            </div>
            <div ng-if="skillTypes.length">

                <div class="row" ng-repeat="s in skills">
                    <a title="click to see associated skills with {{st.name}}" class="col-md-3" href="#">{{s.name}}</a>
                    <button title="edit {{s.name}}" ng-disabled="isEditMode" class="btn btn-xs btn-info col-md-1h" ng-click="edit(s)"><i class="glyphicon glyphicon-edit"></i></button>
                    <button title="remove {{s.name}}" ng-disabled="isEditMode" class="btn btn-xs btn-danger col-md-1h" ng-click="remove(s)"><i class="glyphicon glyphicon-remove"></i></button>
                </div>
            </div>
            <div>
                <br />
                <button ng-disabled="isNewMode || isEditMode" ng-click="addSkill()" class="btn btn-info">Add a new skill associated with {{skillType.name}}</button>
            </div>
            <div id="divAddSkill" ng-show="isNewMode">
                <br />
                <input jr-focus="isNewMode" type="text" placeholder="enter new skill" ng-model="newSkill" />
                <br /><br />
                <button ng-click="saveNewSkill()" class="btn btn-info">Save new skill</button>
                &nbsp;
                <button ng-click="cancelNewSkill()" class="btn btn-warning">Cancel</button>
            </div>
            <div id="divEditSkill" ng-show="isEditMode">
                <br />
                <input jr-focus="isEditMode" type="text" placeholder="edit skill" ng-model="newSkill" />
                <br /><br />
                <button ng-click="updateSkill()" class="btn btn-info">Save skill</button>
                &nbsp;
                <button ng-click="cancelUpdate()" class="btn btn-warning">Cancel</button>
            </div>
        </div>
    </div>
</div>